<template>
  <div class="container-big">
    <div style="padding-bottom: 136px;" class="container">
      <banner />
      <!-- <div class="uncan-right" /> -->
      <div class="orderEnter-box">
        <div class="order-tit">
          购票人信息
        </div>
        <div class="from-box">
          <div class="from-tit ">
            <img class="from-tit-img" src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
            温馨提示：请在订单完成后通过钉钉客户端查看您的票务信息并激活
          </div>
          <div v-for="(item, index) in $store.state.buyTicket.carTicketList" :key="index" class="from">
            <div class="from-head">
              <div class="from-head-bar" />
              <div class="from-head-tit-box cenLeft">
                <div class="from-head-tit">
                  {{ item.body_ticket[0].tname }}
                </div>
                <div v-if="item.body_ticket[0].stime==item.body_ticket[0].etime" class="from-head-date">
                  {{ $moment( $yunQiTicketDataStime(Number(item.body_ticket[0].ticketId))||item.body_ticket[0].stime).utcOffset(480).format('MM月DD日') }} {{$yunQiTicketTime(item.body_ticket[0].ticketId)||item.body_ticket[0].tTypeDate}}
                </div>
                <div v-else class="from-head-date">
                  {{ $moment($yunQiTicketDataStime(Number(item.body_ticket[0].ticketId))||item.body_ticket[0].stime).utcOffset(480).format('MM月DD日') }}- {{ $moment($yunQiTicketDataEtime(Number(item.body_ticket[0].ticketId))||item.body_ticket[0].etime).utcOffset(480).format('MM月DD日') }} {{$yunQiTicketTime(item.body_ticket[0].ticketId)||item.body_ticket[0].tTypeDate}}
                </div>
              </div>
              <div class="from-ticket-sum cenBet">
                <div class="from-head-num-box cenLeft">
                  <span class="num-num">
                    x {{ item.body_ticket.length }} 张
                  </span>
                </div>
                <div class="from-head-sum-num cenRig">
                  <!-- <span style="color:#ebecec;opacity: 0.4">{{foldUpTicket(item.body_ticket[0].ticketId)?`折扣价:${((Number(item.body_ticket[0].eprice)*item.body_ticket.length).toFixed(2) * ($store.state.buyTicket.sureFoldUp / 10)).toFixed(2)}`:''}}</span> -->
                  合计¥
                  <div class="from-head-sum-num-price">
                    <!-- {{ (Number(item.body_ticket[0].eprice)*item.body_ticket.length).toFixed(2) }} -->
                    {{foldUpTicket(item.body_ticket[0].ticketId)?`${((Number(item.body_ticket[0].eprice)*item.body_ticket.length).toFixed(2) * ($store.state.buyTicket.sureFoldUp / 10)).toFixed(2)}`: (Number(item.body_ticket[0].eprice)*item.body_ticket.length).toFixed(2) }}
                  </div>
                  元
                </div>
              </div>
            </div>
            <div class="from-item">
              <div v-for="(useTicketPople, ind) in item.useTicketPople" :key="ind" class="from-input-box" style=" border-bottom: 1px solid rgba(151, 151, 151, 0.2);" @click="enterUseTicketPople(useTicketPople);">
                <div class="from-input-tit cenLeft ">
                  用票人{{item.useTicketPople.length>1?ind+1:''}}
                </div>
                <div v-if="useTicketPople.userData&&useTicketPople.userData.formJson" class="from-input-other cenRig">{{initFiledValue(useTicketPople.userData.formJson) }} </div>
                <!-- <input v-if="useTicketPople.userData&&useTicketPople.userData.formJson" v-model="useTicketPople.userData.formJson[0].attribute.filedValue" placeholder="请填写用票人信息" style=" cursor: pointer;text-align: right;" readonly="readonly" type="text" class="from-input "> -->
                <input v-else placeholder="请填写用票人信息" style=" cursor: pointer;text-align: right;" readonly="readonly" type="text" class="from-input ">
                <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
                  <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
                </div>
              </div>
            </div>
          </div>
          <!-- 单独：类似申请发票-->
          <!-- <div style="min-height: 20px;" class="from">
            <div class="from-item ">
              <div class="from-input-box">
                <div class="from-input-tit cenLeft ">
                  申请发票
                </div>
                <div class="from-input-invoice ">
                  <p class="cenRig">{{invoiceOne}}</p>
                  <p class="cenRig">{{invoiceTwo}}</p>
                </div>
                <input v-model="invoice" style="color:#AFAFB0; text-align:right;" type="text" class="from-input ">
                <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
                  <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
                </div>
              </div>
            </div>
          </div> -->
          <!-- 服务协议 -->
          <div v-if="agreement.length!=0" class="agree-box">
            <span @click="ifAgree=!ifAgree" class="agree-check cenCen">
              <img v-if="!ifAgree" src="https://img.alicdn.com/tfs/TB1gLM9Q7voK1RjSZFwXXciCFXa-200-200.png" />
              <img v-else src="https://img.alicdn.com/tfs/TB1fLM9Q7voK1RjSZFwXXciCFXa-200-200.png" />
            </span>
            <span @click="ifAgree=!ifAgree" style=" color: #fff;" class="readAndAgree">我已仔细阅读并同意</span>
            <span>
              <br />
              <br />
              <a target="_blank" class="readAndAgree" @click="openPage(item.agreementId)" ref="javascript:void(0);" style="  font-weight: bold; text-decoration: underline;" v-for="(item,index) of agreement" :key="index" :style="[{color:$store.state.themeColor}]">《{{item.title}}》</a>
            </span>
            <!-- <a v-if="aHref" target="_blank" :href="aHref">《购票服务协议》</a>
            <span v-else @click="getgetAgeree()">《购票服务协议》</span> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 底部购物车付款 -->
    <div class="screen-fixed-box cenCen">
      <div style="background: #313339; position: relative;" class="goods-box cenBet">
        <div class="goods cenCen">
          <div class="goods-con-box">
            <div class="goods-con-tit">
              <span class="actualPrice-enter">
                <span style="font-size: 12px;">¥</span>
                <span>{{ $store.state.buyTicket.actualPrice }}</span>
                <span style="font-size: 12px;">元</span>
              </span>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " style=" text-decoration: none;text-decoration: none;font-size: 12px;" href="javascript:void(0);" class="originalPrice">
                已优惠
              </a>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " href="javascript:void(0);" style="text-decoration: none;" class="originalPrice-enter-a">
                <span style="font-size: 12px;">¥</span>
                <span>{{ Number($store.state.buyTicket.totalPrice-$store.state.buyTicket.actualPrice).toFixed(2) }}</span>
                <span style="font-size: 12px;">元</span>
              </a>
            </div>
            <div class="goods-con-con">
              已经选购{{ $store.state.buyTicket.carTicketSumList.length }}张
            </div>
          </div>
        </div>
        <div @click="checkPay()" :class="{'submitBtnCheck':ifAgree&&ifClick}" class="submit-btn cenCen">
          <div>
            同意并付款
          </div>
        </div>
        <div v-if=" $store.state.buyTicket.getTicketState.resignationChangeNoticeContent" @click="ticketChangesAlert=true" style=" cursor: pointer;" class="ticketChanges-box " :style="[{color:$store.state.themeColor}]">
          退改签须知
          <!-- <img src="https://img.alicdn.com/tfs/TB17vOKX.KF3KVjSZFEXXXExFXa-200-200.png"> -->
        </div>
      </div>
    </div>
    <!-- 个人票转团购票 -->
    <groupBuying v-if="$store.state.buyTicket.groupBuyingAlert" />
    <van-popup position="bottom" class="van-popup-ticketChanges" v-model="ticketChangesAlert">
      <div class="ticketChanges-chan-box maxWidth">
        <!-- <div class="van-popup-ticketChanges-close">
          <img @click="ticketChangesAlert=false" src="https://img.alicdn.com/tfs/TB1BRO6XYys3KVjSZFnXXXFzpXa-200-200.png" />
        </div> -->
        <ticketChanges />
      </div>
    </van-popup>
  </div>
</template>
<script>
import services from "../../api/profile.js";
import banner from "./banner/banner";
import { getUrlParameter } from "./../../router/publicJs/getUrlParameter.js"; // 得到url 参数并且赋值
import buyTicketService from "./../../api/buyTicketService.js";
import { storageCar } from "./../publicJs/storageCar.js";
import groupBuying from "./../buyTicket/assembly/groupBuying"; //团购票选择弹框
import { getOrderDetail } from "@/api/getOrderDetail";
import ticketChanges from "./../../router/groupBuying/ticketChanges/index"; //退改签须知
export default {
  components: {
    banner,
    groupBuying,
    ticketChanges
  },
  data() {
    return {
      ticketChangesAlert: false,
      agreement: [], //协议
      ifAgree: false, //是否同意协议
      ifClick: true, //是否可以点击，防止重复点击
      invoice: "大会结束后在“个⼈中⼼-订单详情”进行申请",
      invoiceOne: "大会结束后在“个⼈",
      invoiceTwo: "中⼼-订单详情”进行申请",
      aHref: "",
      getOrderStateNum: 0 //获取订单状态次数
    };
  },
  created() {
    if (sessionStorage.getItem("ifAgree") === "true") {
      this.ifAgree = true;
    }
    this.initFun();
  },
  methods: {
    //判断当前门票是否参与折上折 会
    foldUpTicket(ticketId) {
      let foldUpTicket = this.$store.state.buyTicket.foldUpTicket || [];
      if (foldUpTicket.length == 0 && sessionStorage.getItem("foldUpTicket")) {
        foldUpTicket = JSON.parse(sessionStorage.getItem("foldUpTicket"));
      }
      // console.log(foldUpTicket);
      let value = false;
      for (let i = 0; i < foldUpTicket.length; i++) {
        if (ticketId == foldUpTicket[i].ticketId) {
          value = true;
          break;
        }
      }
      return value;
    },
    // 获取新的协议页面
    openPage(agreementId) {
      sessionStorage.setItem("ifAgree", this.ifAgree);
      buyTicketService.lookAgreement(agreementId).then(res => {
        if (res.success) {
          window.location.href = res.result;
        }
      });
    },
    // 初始化字段
    initFiledValue(formJson) {
      let value = "";
      for (let i = 0; i < formJson.length; i++) {
        if (formJson[i].attribute.filedCode == "uName") {
          value += "  " + formJson[i].attribute.filedValue;
        }
        if (formJson[i].attribute.filedCode == "uTel") {
          value += " | " + formJson[i].attribute.filedValue;
        }
      }
      return value ? value : formJson[0].attribute.filedValue || "";
    },
    async initFun() {
      storageCar();
      let res = await getUrlParameter();

      let agereeMents = [];
      if (sessionStorage.getItem("agereeMents")) {
        agereeMents = JSON.parse(sessionStorage.getItem("agereeMents"));
      }
      for (let i = 0; i < agereeMents.length; i++) {
        if (agereeMents[i].typeId == 1) {
          this.agreement.push(agereeMents[i]);
        }
      }
      if (this.agreement.length == 0) {
        this.$toast("请管理员创建购票协议");
        this.$router.push({
          name: "buyTicketHome"
        });
      }

      // buyTicketService
      //   .getAgreement({
      //     corpId: sessionStorage.getItem("corpIdUcan"),
      //     agereeId: sessionStorage.getItem("agereeIdNewWay")
      //   })
      //   .then(res => {
      //     //1 购票协议 2 露脸协议 3 登陆协议
      //     if (res.success) {
      //       this.agreement = [];
      //       for (let i = 0; i < res.result.length; i++) {
      //         if (res.result[i].typeId == 1) {
      //           this.agreement.push(res.result[i]);
      //         }
      //       }
      //     }
      //   });

      // this.getgetAgeree();
      // console.log(this.$store.state.buyTicket.carTicketList);
      // console.log(this.$store.state.buyTicket.carTicketSumList);
    },
    // 获取服务协议
    getgetAgeree() {
      buyTicketService
        .getAgeree(
          this.$store.state.buyTicket.corpId,
          this.$store.state.buyTicket.agereeId
        )
        .then(res => {
          this.aHref = res.result;
        });
    },
    // 查询用票人信息列表
    getuserTicketList() {
      return new Promise(resolve => {
        services.getUserList().then(data => {
          this.$store.state.buyTicket.userTicketList = data || [];
          resolve("ok");
        });
      });
    },
    // 检验支付，是否信息填写完成
    async checkPay() {
      this.$store.state.buyTicket.orderType = 0; //订单类型 0是个人 1是团购
      // // ====
      // 为了测试
      // this.$router.push({
      //   path: "/orderDetail",
      //   query: {
      //     billlcode: 11
      //   }
      // });
      // buyTicketService
      //   .checkPay(this.$store.state.buyTicket.carTicketList)
      //   .then(res => {
      //     console.log("11");
      //   });
      // this.$store.state.buyTicket.groupBuyingAlert = true; //改成转成团购票
      // return;
      // //==
      if (!this.ifAgree && this.agreement.length) {
        let text = "请您务必仔细阅读";
        for (let i = 0; i < this.agreement.length; i++) {
          text += `《${this.agreement[i].title}》`;
        }
        this.$toast(text);
        return;
      }
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 1000);
      // this.$router.push({
      //   path: "/infoEntry"
      // });
      // return;
      if (this.$store.state.buyTicket.carTicketSumList.length == 0) {
        this.$toast("您需要选择购票");
        return;
      }
      let carTicketList = this.$store.state.buyTicket.carTicketList;
      for (let i = 0; i < carTicketList.length; i++) {
        for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
          if (
            !carTicketList[i].useTicketPople[j].userData ||
            !carTicketList[i].useTicketPople[j].userData.id
          ) {
            console.log(
              "groupBuyingLimitNum",
              this.$store.state.buyTicket.groupBuyingLimitNum
            );
            console.log(
              "carTicketSumList",
              this.$store.state.buyTicket.carTicketSumList.length
            );
            if (
              this.$store.state.buyTicket.carTicketSumList.length >=
              this.$store.state.buyTicket.groupBuyingLimitNum
            ) {
              // 如果当前购买数量大等于团购数量则需要选择一项
              this.$store.state.buyTicket.groupBuyingAlert = true; //改成转成团购票
              return;
            } else {
              this.$toast(
                `请填写${carTicketList[i].body_ticket[0].tname}用票人${
                  carTicketList[i].useTicketPople.length > 1 ? j + 1 : ""
                }信息`
              );
              return;
            }
          }
          let userTicketList = this.$store.state.buyTicket.userTicketList || [];
          if (userTicketList.length == 0) {
            this.$store.state.loading = true;
            let getuserTicketListRes = await this.getuserTicketList();
            userTicketList = this.$store.state.buyTicket.userTicketList;
            this.$store.state.loading = false;
          }
          let checkUserTicketListRes = await this.checkUserTicketList(
            carTicketList[i].useTicketPople[j].userData.id,
            userTicketList
          );
          if (!checkUserTicketListRes) {
            this.$toast(
              `请重新填写${carTicketList[i].body_ticket[0].tname}用票人${
                carTicketList[i].useTicketPople.length > 1 ? j + 1 : ""
              }信息`
            );
            return;
          }

          // let userData = carTicketList[i].useTicketPople[j].userData.formJson;
          // // 检验用票人信息是否都已经填写过表单
          // if (!userData) {
          //   this.$toast(
          //     `请填写${carTicketList[i].body_ticket[0].tname}用票人${j + 1}信息`
          //   );
          //   return;
          // } else {
          //   let res = await this.checkUserPopleFrom(
          //     userData,
          //     carTicketList[i].body_ticket[0].tname,
          //     j + 1
          //   );
          //   if (!res) {
          //     return;
          //   }
          // }
        }
      }
      //  // 同意并付款生成订单
      this.$store.state.loading = true;
      this.$store.state.loadingText = "订单生成中";
      buyTicketService
        .checkPay(this.$store.state.buyTicket.carTicketList)
        .then(res => {
          if (!res.success) {
            this.$store.state.loading = false;
            return;
          }
          // 服务端延时
          setTimeout(() => {
            this.getOrderState(res.result.billlcode);
          }, 1000);
        });
    },
    // 获取订单状态
    async getOrderState(billlcode) {
      const { success = false } = await getOrderDetail({
        billlcode: billlcode
      });
      console.log("success", success);
      if (!success) {
        if (this.getOrderStateNum >= 5) {
          this.$store.state.loading = false;
          this.$store.state.loadingText = "";
          this.$toast("请在个人中心订单列表查看订单状态");
          this.$router.push({
            path: "/profile/order-list"
          });
          return;
        }
        if (this.getOrderStateNum >= 2) {
          this.$store.state.loadingText = "订单排队中";
        }
        // 如果失败了则继续获取状态
        this.getOrderStateNum++;
        setTimeout(() => {
          this.getOrderState(billlcode);
        }, 2000);
      } else {
        // 如果成功则进行页面跳转
        this.$store.state.loading = false;
        this.$store.state.loadingText = "";
        this.$router.push({
          path: "/orderDetail",
          query: {
            billlcode: billlcode
          }
        });
      }
    },
    // 检验当前添加的用票人信息是否是本人手机号的，防止cookie问题导致数据不对
    checkUserTicketList(id, userTicketList) {
      return new Promise(resolve => {
        let value = false;
        for (let i = 0; i < userTicketList.length; i++) {
          // 查询id是否可以找到
          if (id == userTicketList[i].id) {
            value = true;
            break;
          }
        }
        resolve(value);
      });
    },
    // 检验用票人信息表单是否必填项都已经填写
    checkUserPopleFrom(userData, tname, index) {
      return new Promise(resolve => {
        let ifOk = true; //是否已经填写可以通过
        for (let q = 0; q < userData.length; q++) {
          if (
            userData[q].attribute.ifCheck &&
            !userData[q].attribute.filedValue
          ) {
            this.$toast(
              `${tname}用票人${index}${
                userData[q].attribute.placeholder
                  ? userData[q].attribute.placeholder
                  : "请填写"
              }${userData[q].attribute.titName}`
            );
            ifOk = false;
            resolve(ifOk);
            return;
          }
        }
        resolve(ifOk);
      });
    },
    // 填写用票人信息
    async enterUseTicketPople(useTicketPople) {
      this.$store.state.buyTicket.useTicketPopleId =
        useTicketPople.useTicketPopleId;
      this.$router.push({
        name: "UserList",
        query: {
          action: "select"
        }
      });
    }
  }
};
</script>

<style >
.orderEnter-box {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.order-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 44px;
  color: #ffffff;
  padding: 0px 5%;
  margin: 0px;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #b9b9bb;
  position: relative;
  text-indent: 36px;
  margin-top: 16px;
  margin-bottom: 26px;
}
.from-tit-img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from {
  width: 100%;
  height: auto;
  /* min-height: 160px; */
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(93, 93, 93, 0.2); */
  /* border: 1px solid #38383b; */
  margin-top: 26px;
  border-radius: 8px 8px 6px 6px;
}
.from-head {
  width: 100%;
  height: auto;
  min-height: 130px;
  padding-bottom: 13px;
  background: #282b31;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
}
.from-head-bar {
  width: 100%;
  height: 9px;
  opacity: 0.8;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity: 0.8;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.from-head-tit-box {
  width: 100%;
  height: auto;
  text-align: left;
  padding: 16px 20px 6px 20px;
  flex-wrap: wrap;
}
.from-head-tit {
  /* font-family: PingFangSC-Medium; */
  font-size: 32px;
  color: #ffffff;
  margin-right: 16px;
}
.from-head-date {
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #ffffff;
  margin-top: 3px;
}
.from-ticket-sum {
  width: 100%;
  height: auto;
}
.from-head-num-box {
  width: 100%;
  height: auto;
  padding: 0px 20px;
}

.from-head-sum-num {
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #ffffff;
  min-width: 360px;
  width: auto;
  height: auto;
  padding-right: 26px;
}
.from-head-sum-num-price {
  /* font-family: PingFangSC-Medium; */
  font-size: 32px;
  color: #ffffff;
  margin: 0px 10px;
}
.num-num {
  /* font-family: PingFangSC-Regular; */
  font-size: 24px;
  color: #ffffff;
}
.from-item {
  padding: 0px 18px;
  width: 100%;
  height: auto;
}
.from-item > div:last-of-type {
  border-bottom: none;
}

.haveBot {
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}
/* 组件input样式 */
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 166px;
  height: auto;
  min-height: 100px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 6px 0px 0px;
}
.from-input-tit-check {
  margin-right: 1px;
}
.checkNot {
  opacity: 0;
}
.from-input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  text-align: right;
}
.from-input-invoice {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  text-align: right;
  padding-top: 16px;
}
.from-input-invoice > p {
  width: 100%;
  text-align: right;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
}
.from-input-other {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  text-align: right;
}
.from-input-right-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
}
.from-input-right-icon > img {
  width: 36px;
  height: auto;
}
.agree-box {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  margin-top: 26px;
  color: #fff;
}
.agree-check {
  width: 35px;
  height: auto;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
.agree-check > img {
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.agree-box > a,
.agree-box > span {
  cursor: pointer;
}
.agree-box > a {
  text-decoration: underline;
}
/* 底部购物车等 */
.goods-box {
  z-index: 9;
  width: 100%;
  height: auto;
  padding: 0px;
  min-height: 110px;
  background: #35383f;
  box-shadow: 0 -10px 17px 0 rgba(0, 0, 0, 0.1);
}
/* 提交按钮 */
.submit-btn {
  width: auto;
  height: auto;
  min-height: 110px;
  background: #2b2d31;
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  min-width: 260px;
  cursor: pointer;
  position: relative;
}

.submitBtnCheck {
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.submit-btn > div {
  height: 100%;
  color: #eeeeee;
}

/* .submit-btn:active {
  opacity: 0.6;
} */
/* 左边的功能容器 */
.goods {
  width: auto;
  height: 100%;
  position: relative;
  padding-left: 20px;
}
/* 购物车内容部分 */
.goods-con-box {
  width: auto;
  height: auto;
  text-align: left;
  margin: 0px 0px 0px 10px;
}

.goods-con-tit {
  width: auto;
  height: auto;
  font-size: 26px;
  color: #ebecec;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
}

.goods-con-con {
  width: auto;
  height: auto;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  padding: 3px 3px 3px 0px;
  font-size: 20px;
  color: #ebecec;
}

.goods-con-con > img {
  width: 26px;
  height: auto;
  margin-left: 6px;
}
.actualPrice-enter {
  margin-right: 5px;
}
.actualPrice-enter > span {
  font-size: 30px;
  color: #ebecec;
}
.originalPrice {
  text-decoration: line-through;
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #ebecec;
  letter-spacing: 2.8px;
}
.originalPrice-enter-a > span {
  text-decoration: line-through;
  opacity: 0.4;
  font-size: 30px;
  color: #ebecec;
}

.ticketChanges-box {
  position: absolute;
  right: 250px;
  bottom: 0px;
  width: 180px;
  height: auto;
  /* opacity: 0.8; */
  font-size: 28px;
  font-weight: bold;
  text-decoration: underline;
  color: #ebecec;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  flex-wrap: nowrap;
  cursor: pointer;
  padding-bottom: 18px;
}
.ticketChanges-box > img {
  width: 26px;
  height: auto;
  margin-left: 6px;
}
.van-popup-ticketChanges {
  max-height: 66% !important;
  background: rgba(0, 0, 0, 0.7);
}
.van-popup-ticketChanges-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 100%;
  height: auto;
  text-align: right;
}
.van-popup-ticketChanges-close > img {
  width: 40px;
  height: auto;
  margin: 26px 26px 0px 0px;
}
.ticketChanges-chan-box {
  width: 100%;
  height: auto;
  position: relative;
  cursor: pointer;
}
.readAndAgree {
  font-size: 30px;
}
</style>
